<template>
  <view class="note-list" @click="detail">
    <view class="img-wrapper">
      <image class="img" :src="src" mode="widthFix"></image>
			<!-- #ifdef MP-WEIXIN -->
		<!-- 	<video class="video" v-else object-fit="cover" :src="showImgUrl" :controls="false"
				:show-center-play-btn="false" :show-play-btn="false" :show-fullscreen-btn="false"></video> -->
			<!-- #endif -->
			<!-- #ifdef APP-PLUS || H5 -->
			<!-- <image class="video-thumb" :src="videoPoster" mode="widthFix" v-if="info.type == 2"></image> -->
			<!-- #endif -->
      <!-- <image class="video-btn" :src="$cdnurl(`catStar/play-btn.png`)" mode="" v-if="info.type == 2"></image> -->
    </view>
    <view class="note-info">
      <view class="title">{{ info.title || info.desc }}</view>
      <view class="bottom-part">
        <view class="user">
          <image class="avatar" :src="info.avatar || '/static/images/logo.png'" mode="aspectFill"></image>
          <view class="user-name">{{ info.nick || '' }}</view>
        </view>
        <view class="zan-wrapper" :hover-stop-propagation="true">
          <uni-icons :class="{ 'praise-actice': isPraise }" :type="praiseIcon" :size="14" :color="iconColor"></uni-icons>
          <text class="zan-num">{{ praiseNumber }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { useUserStore } from '../../store/userStore'
import config from '../../network/config'

export default {
  props: {
    info: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      praiseIcon: '',
      iconColor: '',
      isPraise: false,  //是否点赞
      nums: 0,  // 点赞数量
      noteInfo: {},  // 笔记信息
      videoPoster: "",
			userStore: useUserStore()
    }
  },
  emits: ['updateShowLoginPopup'],
  watch: {
    info: {
      handler(val) {
        this.noteInfo = val
      },
      immediate: true
    },
    noteInfo: {
      handler(val) {
        this.isPraise = val?.is_like == 0 ? false : true
        this.nums = val?.like_num
      },
      immediate: true,
      deep: true
    },
    isPraise: {
      handler(val) {
        if (val) {
          this.praiseIcon = 'heart-filled'
          this.iconColor = '#FF3D3D'
        } else {
          this.praiseIcon = 'heart'
          this.iconColor = '#999'
        }
      },
      immediate: true
    }
  },
  computed: {
    praiseNumber() {
      const length = this.nums.toString().length
      return length > 4 ? (this.nums / 10000).toFixed(2) + 'w' : this.nums
    },
    showImgUrl() {
      const list = this.info.imgs.split(',')
      if(this.info.type == 1) {
        return list[0]
      } else {
        return list.find(item => this.checkMediaType(item) == 'video')
      }
    },
		src() {
			const picData = this.info.pict_url
			if (typeof picData == 'string') {
				return JSON.parse(picData).src
			}
			return picData.src
		}
  },
  mounted() {
    /* this.$nextTick(()=> {
      if(this.info.type == 2) {
        this.videoPoster = aliyunVideoCover(this.showImgUrl)
      }
    }) */
  },
  methods: {
		// 笔记详情
    detail() {
      const { id } = this.info
			const url = `${config.x5jWeb}/article/show-${id}.html`
			uni.navigateTo({
				url:'/pages/webview/index?url=' + url
			})
    },
    // 用户点击喜欢笔记
    async praise() {
      if (this.userStore.islogin) {
        try {
          const result = await lovePet({
            type: 4,
            data_id: this.info.id
          })
          const res = result.data
          if (res.code == 200) {
            // this.$emit('praiseSuccess', this.info.id)
            this.noteInfo.is_like = this.noteInfo.is_like == 0 ? 1 : 0
            if (this.noteInfo.is_like == 0 && this.noteInfo.liked_num > 0) {
              this.noteInfo.liked_num -= 1
            } else if (this.noteInfo.is_like > 0) {
              this.noteInfo.liked_num += 1
            }
          }
        } catch (e) {
          //TODO handle the exception
        }
      } else {
        uni.showToast({
          title: '你还没有登录哦',
          icon: 'none'
        })
        this.$emit('updateShowLoginPopup', true)
      }
    },

    checkMediaType(url) {
      // 创建URL对象
      let link = new urlObject(url)
      // 获取路径部分（去除参数）
      let path = link.pathname
      // 获取路径的最后一个点之后的内容作为文件扩展名
      let extension = path.split(".").pop().toLowerCase()
      // 声明支持的图片和视频文件扩展名
      let imageExtensions = ["jpg", "jpeg", "gif", "png"]
      let videoExtensions = ["mp4", "wmv", "avi", "mov"]
      // 判断文件扩展名是否在图片扩展名数组中
      if (imageExtensions.includes(extension)) {
        return "image"
      }
      // 判断文件扩展名是否在视频扩展名数组中
      if (videoExtensions.includes(extension)) {
        return "video"
      }
      // 扩展名不在图片或视频数组中，返回null表示无法确定媒体类型
      return null
    },
  }
}
</script>

<style scoped lang="scss">
.note-list {
  // border: 1px solid transparent;
  background-color: #fff;
  border-radius: 12px;
  margin-bottom: 24rpx;
  pointer-events: auto;
}

.img-wrapper {
  width: 100%;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  overflow: hidden;
	max-height: 460rpx;
  position: relative;

  .img {
    width: 100%;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }

  .video {
    width: 100%;
    pointer-events: none;
  }
  .video-thumb {
    width: 100%;
  }

  .video-btn {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    top: 12px;
    right: 12px;
  }
}

.note-info {
  padding: 10px;
  padding-top: 4px;
  color: #222;

  .title {
    font-size: 12px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .bottom-part {
    width: 100%;
    margin-top: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .user,
    .zan-wrapper {
      display: flex;
      align-items: center;
    }

    .user {
      width: calc(100% - 90rpx);
    }

    .avatar {
      width: 36rpx;
      height: 36rpx;
      border-radius: 50%;
      background-color: #eee;
      z-index: 0;
    }

    .user-name,
    .zan-num {
      font-size: 10px;
      color: #999;
      padding-left: 4px;
    }

    .zan-num {
      padding-left: 2px;
    }

    .user-name {
      width: calc(100% - 28rpx);
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      line-clamp: 1;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
  }
}

.praise-actice {
  animation: zanAni .2s linear;
}

@keyframes zanAni {
  from {
    transform: scale(0.1);
  }

  to {
    transform: scale(1);
  }
}
</style>